Flash Of Unstyled Content
   HOME

TheInfoList



OR:

A flash of unstyled content (or flash of unstyled text, FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the
web browser engine A browser engine (also known as a layout engine or rendering engine) is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactiv ...
rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift may be distracting. Related problems include flash of invisible text and flash of faux text.


Technical information

The issue was documented in an article named "Flash of Unstyled Content". At first, FOUC appeared to be a browser problem unique to
Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical user interface, graphical web browsers developed by Microsoft which was used in the Microsoft Wind ...
but later became apparent in other browsers, and has since been described as "a
Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an importa ...
epidemic". A flash of unstyled content is indifferent to changes in
CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...
or
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScri ...
versions. This problem, which leaves the core content unaffected, originates from a set of priorities programmed into the browser. As the browser collects HTML and all the ancillary files referenced in the markup, the browser builds the
Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
on-the-fly. The browser may choose to first display the text so that it can parse the quickest. Flashes of unstyled content are more prevalent now that HTML pages are more apt to reference multiple style sheets. Web pages often include style references to media other than the browser screen, such as CSS rules for printers and mobile devices. Web pages may import layers of style files, and reference alternative style sheets. Online advertisements and other inserted offsite content, like videos and search engines, often dictate their own style rules within their code block. The cascading nature of CSS rules encourages some browsers to wait until all the style datasets have been collected before applying them. With the advent of
JavaScript libraries A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Libraries With the expanded demands for JavaScript, an ea ...
such as
jQuery jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used ...
which can be employed to further define and apply the styling of a web page, flashes of unstyled content have also become more prominent. In an attempt to avoid unstyled content, front-end developers may choose to hide all content until it is fully loaded, at which point a load event handler is triggered and the content appears, though an interruption of loading might leave behind a blank page, to which unstyled content would be preferable. To emulate a flash of unstyled content, developers can use browser add-ons that are capable of disabling a web page's CSS on the fly. Firebug and Async CSS are such add-ons. Other techniques include manually stopping a page from completing the loading of CSS components. Another option entails using script-blocking tools. While, by 2016, several different techniques had been developed to avoid undesired display behaviours, a change in rendering behaviour in
Google Chrome Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS ...
version 50, whereby stylesheets injected by JavaScript are prevented from blocking page loading, as required by the
HTML5 HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML ...
specification, brought the situation to website creators' attentions again, particularly affecting users of
Typekit Adobe Fonts (formerly Typekit) is an online service that provides its subscribers with access to its font library, under a single licensing agreement. The fonts may be used directly on websites, or synced via Adobe Creative Cloud to applications ...
, a
web typography Web typography is the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each web browser. There was no mechanism for individual Web pages to control font display u ...
product from
Adobe Systems Adobe Inc. ( ), originally called Adobe Systems Incorporated, is an American multinational computer software company incorporated in Delaware and headquartered in San Jose, California. It has historically specialized in software for the crea ...
. Within 2 months, Adobe had changed the way in which their fonts were included into third-party websites in order to avoid the undesired rendering behaviour.


See also

*
Progressive enhancement Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access ...


References

{{Reflist Web design